<template>
  <div class="manage">
    
    <el-dialog
    :title="operateType === 'add' ? '新增用户':'更新用户'"
    :visible.sync="isshow"
    >
     <common-form
      :formLabel="operateFormLabel"
      :form="operateForm"
      :inline="true"
      ref="form"
     ></common-form>
     <div slot="footer" class="dialog-footer">
      <el-button @click="isshow = false">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>

     </div>
    </el-dialog>

    <div class="manage-header">
      <el-button type="primary" @click="addUser" size="medium" >+新增</el-button>
      <div style="margin-top: 24px;">
        <common-form
      :formLabel="formLabel"
      :form="searchFrom"
      :inline="true"
      ref="form"
    
     >
     <el-button type="primary" @click="getList(searchFrom.keyword)" size="medium">
      搜索
     </el-button>
     </common-form>
      </div>
    
  </div>
  
    <div style="margin-left:10px;height:780px;">
      <common-table
      :tableData="tableData"
      :tableLabel="tableLabel"
      :config="config"
      @changePage="getList()"
      @edit="editUser"
      @del="delUser"
      > 
      </common-table>
    </div>
  

   
  </div>
</template>

<script>
import commonForm from '@/components/commonForm.vue'
import commonTable from '@/components/commonTable.vue'
import {getUser} from "../../api/data"
export default {
    components:{
      commonForm,
      commonTable
    },
    name:'myUser',
    data() {
        return {
            operateType:'add',
            isshow:false,
            operateFormLabel:[
              {
                model:'name',
                label:'姓名',
                type:'input'
              },
               {
                model:'age',
                label:'年龄',
                type:'input'
              },
               {
                model:'sex',
                label:'性别',
                type:'select',
                opts:[
                  {
                    label:'男',
                    value: 1
                  },
                  {
                    label:'女',
                    value:0
                  }
                ]
              },
               {
                model:'birth',
                label:'出生日期',
                type:'date'
              },
               {
                model:'addr',
                label:'地址',
                type:'input'
              },
              

            ],
            operateForm:{
              name:'',
              addr:'',
              age:'',
              birth:'',
              sex:''

            },
            searchFrom:{
              keyword:'',
            
            },
            formLabel:[
              {
                model:'keyword',
                label:'',
                type:'input'
              }
            ],
            tableData:[],
            tableLabel:[
              {
                prop:'name',
                label:'姓名'
            },
              {
                prop:'age',
                label:'年龄'
            },
              {
                prop:'sexLabel',
                label:'性别'
            },
              {
                prop:'birth',
                label:'出生日期',
                 width:200
            },
              {
                prop:'addr',
                label:'地址',
                width:320
            },
            ],
            config:{
              page:1,
              total:20
            }
        }
    },
    methods:{
      confirm(){
        if(this.operateType === 'edit'){
          this.$http.post('/user/edit',this.operateForm).then(()=>{
              //  console.log('res',res)
               this.isshow = false
               this.getList()
          })
        }else{
          this.$http.post('/user/add',this.operateForm).then(()=>{
              // console.log('res',res)
               this.isshow = false
                this.getList()
          })
        }
      },
      addUser(){
        this.isshow = true
        this.operateType = 'add'
        this.operateForm = {
              name:'',
              addr:'',
              age:'',
              birth:'',
              sex:''

            }
      },
      getList(name = ''){
        
        //  this.config.loading = true
        name?(this.config.page=1):''
        getUser({
          page:this.config.page,
          name
        }).then(res=>{
          
          this.tableData = res.data.list.map(item=>{
            item.sexLabel = item.sex ===0?'女':'男'
            return item
          })
          this.config.total =res.data.count
          //  this.config.loading = false
          //  console.log(' this.tableData', this.tableData)
        })
      },
      delUser(row){
        this.$confirm("是否删除该用户？","提示",{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:"warning"
        }).then(()=>{
          const id = row.id
          this.$http.get("user/del",{
            params:{id}
          }).then(()=>{
            this.$message({
              type:"success",
              message:"删除成功"
            })
             this.getList()
          })
        })
      },
      editUser(row){
         this.operateType = 'edit'
         this.isshow = true
         this.operateForm = row
      }


    },
    created(){
      this.getList()
    }
}
</script>

<style lang="less" scoped>

body{
  padding: 0px;
  margin: 0px;
}
.manage-header{
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.el-button--medium {
    line-height: 8px;
}
.el-button {
    height: 38px;
}
</style>